<template>
    <div class="accounting">
        <div class="breadcrumb">
            位置：首页<span>></span>小竹资讯<span>></span>
            <template v-if="info">
                <nuxt-link v-if="info.tid == 3" to="/information/czzx/1"
                    >财政资讯</nuxt-link
                >
                <nuxt-link v-if="info.tid == 1" to="/information/kszx/1"
                    >考试资讯</nuxt-link
                >
                <nuxt-link v-if="info.tid == 2" to="/information/sjjc/1"
                    >税局稽查</nuxt-link
                >
                <nuxt-link v-if="info.tid == 4" to="/information/ggwz/1"
                    >财税分享</nuxt-link
                >
            </template>
        </div>

        <div class="title">
            {{ info.title }}
        </div>

        <div class="info">
            <div>文章来源：{{ info.resource }}</div>
            <div>时间：{{ info.push_date }}</div>
        </div>

        <div class="pic">
            <img :src="info.pic" :alt="info.title" />
        </div>

        <div
            class="content"
            v-html="info.content"
            @click="imageEnlargement"
        ></div>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

import {
    getImformationInfo,
    setCollect,
    getReadingList,
} from "@/assets/api/InformationApi.js";
import { getanalysedata } from "@/assets/api/indexApi";
import { getText, goTopSmooth } from "@/assets/utils/utils.js";
import { ImagePreview } from "vant";
export default {
    components: {},
    async asyncData({ params }) {
        let data = {
            id: 0,
            info: null,
            meta: {
                title: "",
                keywords: "",
                description: "",
            },
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/information/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
        };

        data.id = params.id.replace(".html", "");
        data.jsonld["@id"] += params.id;

        const res = await getImformationInfo({
            id: data.id,
        });
        if (res.code == 1) {
            data.info = res.data;
            if (data.info.title) {
                data.meta.title = data.info.title + "-【小竹财税平台】";
                data.meta.description = getText(data.info.content, 90);
                data.jsonld.title = data.meta.title;
                data.jsonld.description = data.meta.description;
                data.jsonld.pubDate = data.jsonld.upDate = data.info.push_date;
            }
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.meta.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.meta.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.meta.keywords,
                },
            ],
        };
    },
    data() {
        return {
            title: "资讯详情",
            tid: 0,
        };
    },
    created() {
        this.getMetaInfo();
    },
    mounted() {
        console.log(this.info);
        let code = "PJ1";
        let describe = "";
        if (this.$route.params.type == "rmzx") {
            code = "PJ1";
            describe = "热门资讯";
        } else if (this.$route.params.type == "czzx") {
            code = "PJ2";
            describe = "财政资讯";
        } else if (this.$route.params.type == "kszx") {
            code = "PJ3";
            describe = "考试资讯";
        } else if (this.$route.params.type == "sjjc") {
            code = "PJ4";
            describe = "税局稽查";
        } else if (this.$route.params.type == "ggwz") {
            code = "PJ5";
            describe = "财税分享";
        } else {
            code = "PJ1";
            describe = "热门资讯";
        }
        getanalysedata({
            m_id: 7,
            type: 1,
            code: code,
            describe: describe + "-" + this.info.title,
        });

        this.$nextTick(() => {
            goTopSmooth();
        });
    },
    computed: {},
    methods: {
        getMetaInfo() {
            if (this.$route.params.type == "rmzx") {
                this.meta.keywords = "小竹财税资讯";
            } else if (this.$route.params.type == "czzx") {
                this.meta.keywords = "财政资讯";
            } else if (this.$route.params.type == "kszx") {
                this.meta.keywords = "会计考试资讯";
            } else if (this.$route.params.type == "sjjc") {
                this.meta.keywords = "税局稽查新闻";
            } else if (this.$route.params.type == "ggwz") {
                this.meta.keywords = "税务资讯";
            }
        },
        // 点击富文本
        imageEnlargement(e) {
            if (e.target.nodeName == "IMG") {
                ImagePreview({
                    images: [e.target.currentSrc],
                    closeable: true,
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.accounting {
}
.breadcrumb {
    height: 2.28rem;
    line-height: 2.28rem;
    padding-left: 1.43rem;
    font-size: 0.75rem;
    color: #666666;
    background: #e8f4ff;
    border-bottom: 1px solid #f6f6f6;
}

.title {
    width: 86.6%;
    margin: 0 auto;
    padding: 1rem 0;
    font-weight: 700;
    font-size: 1.25rem;
    color: #333333;
    line-height: 1.5;
}

.info {
    display: flex;
    justify-content: space-between;
    width: 86.6%;
    margin: 0 auto;
    font-weight: 350;
    font-size: 0.75rem;
    color: #666666;
}
.pic {
    width: 86.6%;
    margin: 1.9rem auto 0;
    img {
        width: 100%;
        height: auto;
        border-radius: 0.31rem;
    }
}

.content {
    width: 86.6%;
    margin: 1.9rem auto 0;
    &::v-deep em {
        color: #ffffff !important;
        background: #f56c6c;
    }
    &::v-deep img {
        width: 100%;
        margin: 0 auto;
    }
}
</style>
